<template>
  <div>
    <el-card>
      <!-- 搜索区 -->
      <el-row :gutter="20">
        <el-col :span="11">
          <el-date-picker value-format="yyyy-MM-dd"
                          @change="dateChange"
                          placeholder="选择日期"
                          style="width: 39%;"
                          v-model="param.cDate">
          </el-date-picker>
          <el-button type="primary"
                     icon="el-icon-search"
                     circle
                     @click="getConferenceList()"></el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="conferenceList"
                border
                stripe
                style="" >
        <el-table-column label="会议室名称"
                         width="100px"
                         prop="bname">
        </el-table-column>
        <el-table-column label="会议室类型"
                         width="100px">
          <template slot-scope="scope">
            {{typeJudge(scope.row.btype)}}
          </template>
        </el-table-column>
        <el-table-column label="预约"
                         width="80px">
          <template slot-scope="scope">
            <el-tooltip effect="dark"
                        content="预约"
                        placement="top"
                        :enterable="false">
              <el-button type="primary"
                         icon="el-icon-thumb"
                         size="mini"
                         @click="showReverse(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="详情"
                         width="80px">
          <template slot-scope="scope">
              <el-button size="mini" icon="el-icon-info" slot="reference" type="info" @click="showDetails(scope.row)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="09:00-09:30">
          <template  slot-scope="scope">
            <!-- {{scope.row.voList[0].isCon === 1 ? '已预定' : '未预定'}} -->
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[0].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="09:30-10:00">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[1].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="10:00-10:30">
          <template slot-scope="scope">
           <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[2].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="10:30-11:00">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[3].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="11:00-11:30">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[4].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="11:30-12:00">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[5].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="12:00-12:30">
          <template slot-scope="scope">
           <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[6].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="12:30-13:00">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[7].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="13:00-13:30">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[8].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="13:30-14:00">
          <template slot-scope="scope">
           <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[9].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="14:00-14:30">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[10].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="14:30-15:00">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[11].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="15:00-15:30">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[12].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="15:30-16:00">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[13].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="16:00-16:30">
          <template slot-scope="scope">
           <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[14].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="16:30-17:00">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[15].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="17:00-17:30">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[16].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="17:30-18:00">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[17].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="18:00-18:30">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[18].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="18:30-19:00">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[19].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="19:00-19:30">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[20].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="19:30-20:00">
          <template slot-scope="scope">
           <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[21].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="20:00-20:30">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[22].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="20:30-21:00">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="parseFloat(percentAge(scope.row.voList[23].isCon))" :format="format"></el-progress>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange"
                     :current-page="param.current"
                     :page-size="5"
                     layout="prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>

    <!-- 预定会议的对话框 -->
    <el-dialog title="预定会议室"
               :visible.sync="reverseDialogVisible"
               width="69%"
               @close="reverseDialogClosed">
      <!-- 内容主体 -->
      <el-form :model="reverseForm"
               :rules="reverseFormRules"
               ref="reverseFormRef"
               label-width="180px">
        <el-form-item label="房间名">
          <el-input v-model="reverseForm.bName" disabled></el-input>
        </el-form-item>
        <el-form-item label="开始日期"
                      prop="cDate">
          <el-date-picker placeholder="选择日期" 
                          v-model="param.cDate" 
                          :clearable="false"
                          :picker-options="pickerOptions"
                          :editable="false"
                          value-format="yyyy-MM-dd"
                          style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间"
                      prop="beginTime">
          <el-select v-model="reverseForm.beginTime"
                          placeholder="请选择开始时间" style="width: 100%">
              <el-option
                v-for="item in timeOptions"
                :key="item.value"
                :value="item.value">
              </el-option> 
          </el-select>
        </el-form-item>
        <el-form-item label="结束时间"
                      prop="endTime">
          <el-select v-model="reverseForm.endTime"
                    placeholder="请选择结束时间"
                    style="width: 100%">
              <el-option
                v-for="item in timeOptions"
                :key="item.value"
                :value="item.value">
              </el-option> 
          </el-select>
        </el-form-item>
        <el-form-item label="预定周期"
                      prop="type">
          <!-- <el-select v-model="reverseForm.type"
                    placeholder="请选择预约周期"
                    style="width: 100%">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option> 
          </el-select> -->
          <el-cascader
            v-model="typeAndNum"
            :options="typeOptions"
            @change="handleChange"
            style="width: 100%"></el-cascader>
        </el-form-item>
        <!-- <el-form-item label="预定次数"
                      prop="num">
          <el-input v-model="reverseForm.num"></el-input>
        </el-form-item> -->

        <el-form-item label="预定人邮箱">
          <el-input v-model="reverseForm.umail" disabled></el-input>
        </el-form-item>
        <el-form-item label="会议主题"
                      prop="comment">
          <el-input v-model="reverseForm.comment"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按钮区 -->
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="reverseDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="addConference">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeAndNum: [],
      percentage:[],
      details: '',
      conferenceList: [],
      param: {
        cDate: new Date(),
        current: 1,
      },
      size: 5,
      total: 0,
      reverseForm: {
        bName: '',
        cDate: new Date(),
        beginTime: '',
        endTime: '',
        type: '',
        num: '',
        umail: window.sessionStorage.getItem('loginUserUmail'),
        comment: ''
      },
      reverseFormRules: {
        cDate: { required: true, message: '请选择预定日期', trigger: 'blur' },
        beginTime: {required: true, message: '请选择开始时间', trigger: 'blur'},
        endTime: {required: true, message: '请选择结束时间', trigger: 'blur'},
        type: {required: true, message: '请输入是否周期预定', trigger: 'blur'},
        num: {required: true, message: '请输入周期预定次数', trigger: 'blur'},
        comment: {required: true, message: '请输入会议主题', trigger: 'blur'},
      },
      //控制对话框的显示与隐藏
      reverseDialogVisible: false,
      timeOptions: [
        {
          value: '09:00:00'
        },
        {
          value: '09:30:00'
        },
        {
          value: '10:00:00'
        },
        {
          value: '10:30:00'
        },
        {
          value: '11:00:00'
        },
        {
          value: '11:30:00'
        },
        {
          value: '12:00:00'
        },
        {
          value: '12:30:00'
        },
        {
          value: '13:00:00'
        },
        {
          value: '13:30:00'
        },
        {
          value: '14:00:00'
        },
        {
          value: '14:30:00'
        },
        {
          value: '15:00:00'
        },
        {
          value: '15:30:00'
        },
        {
          value: '16:00:00'
        },
        {
          value: '16:30:00'
        },
        {
          value: '17:00:00'
        },
        {
          value: '17:30:00'
        },
        {
          value: '18:00:00'
        },
        {
          value: '18:30:00'
        },
        {
          value: '19:00:00'
        },
        {
          value: '19:30:00'
        },
        {
          value: '20:00:00'
        },
        {
          value: '20:30:00'
        },
        {
          value: '21:00:00'
        },
      ],
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      typeOptions: [
        {
          value: 0,
          label: '无',
          children:[{
            value: 1,
            label: '预约1次'
          }]
        },
        {
          label: '每天预约一次',
          value: 1,
          children:[
            {
              value: 1,
              label: '预约1次'
            },
            {
              value: 2,
              label: '预约2次'
            },
            {
              value: 3,
              label: '预约3次'
            },
            {
              value: 4,
              label: '预约4次'
            },
            {
              value: 5,
              label: '预约5次'
            },
            {
              value: 6,
              label: '预约6次'
            },
            {
              value: 7,
              label: '预约7次'
            }
          ]
        },
        {
          label: '每隔一周预约一次',
          value: 7,
          children:[
            {
              value: 1,
              label: '预约1次'
            },
            {
              value: 2,
              label: '预约2次'
            },
            {
              value: 3,
              label: '预约3次'
            },
            {
              value: 4,
              label: '预约4次'
            }
          ]
        }
      ]
    }
  },
  created() {
    this.getConferenceList();
    for(let i =0 ;i<this.percentage.length; i++){
        this.percentage[i]='0'
    }
  },
  methods: {
    handleChange(value){
      console.log(value)
    },
    typeJudge(btype){
      if (btype=='0'){
        return '普通会议室'
      }else if (btype == '1'){
        return '电话会议室'
      }else if (btype=='2'){
        return '电视会议室'
      }
    },
    percentAge(isCon){
      if(isCon == 1){
        return '100'
      }else{
        return '0'
      }
    },
    async getConferenceList() {
      console.log(this.param.cDate);
      let params = this.$qs.stringify({
        预订日期: this.param.cDate,
        页: this.param.current,
      })
      let url = '/api/Conference/indexList' + '?' + params
      const { data: res } = await this.$axios.get(url);
      if (res.code !== 200) return this.$message.error(res.data)
      this.conferenceList = res.data.records;
      this.total = res.data.total;
      console.log(this.conferenceList[0].voList);
      
      
    },
    dateChange(newDate){
      this,this.param.cDate = newDate;
      this.getConferenceList();
    },
    handleCurrentChange(newCurrent){
      this.param.current = newCurrent;
      this.getConferenceList();
    },
    //监听添加对话框的关闭事件
    reverseDialogClosed() {
      this.$refs.reverseFormRef.resetFields();
    },
    showReverse(info){
      this.reverseForm.bName = info.bname;
      this.reverseDialogVisible = true;
    },
    async addConference(){
      let url = 'api/Conference/order';
      let params = this.$qs.stringify({
        房间名: this.reverseForm.bName,
        开始日期: this.param.cDate,
        开始时间: this.reverseForm.beginTime,
        结束时间: this.reverseForm.endTime,
        预订周期: this.typeAndNum[0],
        预订次数: this.typeAndNum[1],
        预订人邮箱: this.reverseForm.umail,
        会议主要内容: this.reverseForm.comment
      })
      const { data: res } = await this.$axios.post(url, params);
      if (res.code !== 200) {
        return this.$message.error(res.data);
      }
      this.reverseDialogVisible = false;
      this.getConferenceList();
      return this.$message.success(res.data);
    },
    async showDetails(info){
      let param = this.$qs.stringify({
        房间名: info.bname,
        日期: this.param.cDate
      });
      let url = "/api/Conference/OneCon" + '?' + param;
      const {data: res} = await this.$axios.get(url);
      if(res.code !== 200){
        return this.$message.error(res.data);
      }
      let repairedMsg = '';
      if(res.data.repairMessage === null){
        repairedMsg = '一切正常';
      }else{
        repairedMsg = res.data.repairMessage;
      }
      let recordMsg = ''
      if(res.data.uemail === null){
        recordMsg = '今日无人预约';
      }else{
        recordMsg = res.data.uemail;
      }
      let msg1 = "容纳人数：" + res.data.capacities;
      let msg2 = "房间设备：" + res.data.bremark;
      let msg3 = "维修状况：" + repairedMsg;
      let msg4 = "预约情况：" + recordMsg;


      this.$alert('<strong>' + msg1 + '<br/>' + 
                               msg2 + '<br/>' +
                               msg3 + '<br/>' +
                               msg4 + '</strong>', '房间信息', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定'
      });
    },
    format(percentage) {
      if (percentage == 100) {
        return " "
      } else if (percentage < 90) {
        return " "
      } else {
        return " "
      }
    },  
  },

}
</script>

<style lang="less" scoped>
.el-col {
  display: flex;
  .el-button {
    margin-left: 15px;
  }
}
.el-table {
  border-radius: 2px;
}


</style>